<script setup lang="ts">
import Subscribe from '@/components/Subscribe.vue';
import Start from '@/views/ido/Start.vue';
import IdoList from '@/components/IdoList.vue';
import Contact from '@/components/Contact.vue';

import participateImg from '@/assets/images/ido/learn1.png';
import buyImg from '@/assets/images/ido/learn2.png';
import daoImg from '@/assets/images/ido/learn3.png';
import fundedListIcon from '@/assets/images/ido/ido-total-1.png';
import joinerIcon from '@/assets/images/ido/ido-total-2.png';
import raisedIcon from '@/assets/images/ido/ido-total-3.png';
import totalBg from '@/assets/images/ido/star.png';

import { ref } from 'vue';

import { CountTo } from 'vue3-count-to';

import { IDO, IDOTotal } from '@/types/ido';
import { upcomingList, list } from '@/views/fakeDb.js';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const newIdoList = ref<IDO[]>([]);
newIdoList.value = upcomingList;
const idoList = ref<IDO[]>([]);
idoList.value = list;

const currentPage = ref<number>(1);

const idoTotal = ref<IDOTotal[]>([]);
const fakeData = [
  { title: t('message.ido.total.funded'), total: '21' },
  { title: t('message.ido.total.participant'), total: '34567' },
  { title: t('message.ido.total.capital'), total: '904860' },
];
idoTotal.value = fakeData;

const resolveIdoTotalIcon = (total: string) => {
  if (total === t('message.ido.total.funded')) return { icon: fundedListIcon };
  if (total === t('message.ido.total.participant')) return { icon: joinerIcon };
  if (total === t('message.ido.total.capital')) return { icon: raisedIcon };
  return { icon: raisedIcon };
};
</script>

<template>
  <div class="relative">
    <start></start>

    <!--  total-->
    <div
      class="ido-total py-4 px-7 sm:p-6 xs:p-0 mb-20 mt-8 xs:!mx-6 relative bg-white"
    >
      <v-row>
        <v-col
          v-for="(total, index) in idoTotal"
          :key="index"
          cols="12"
          sm="6"
          md="4"
          class="xs:w-full"
        >
          <v-card style="box-shadow: unset !important" class="bg-white">
            <div class="d-flex align-center">
              <img
                :src="resolveIdoTotalIcon(total.title).icon"
                class="ido-total-item-icon"
                alt=""
              />
              <div>
                <span class="total-title">{{ total.title }}</span>
                <div class="font-weight-semibold mt-3 total-value mb-6">
                  <span v-if="index === 2">$</span>
                  <count-to
                    :startVal="0"
                    :endVal="parseInt(total.total)"
                    :duration="3000"
                  ></count-to>
                </div>
              </div>
            </div>
          </v-card>
        </v-col>
      </v-row>
      <v-img :src="totalBg" class="total-bg"></v-img>
    </div>

    <!--  upcoming ido-->
    <div class="upcoming-ido bg-white">
      <div class="ido-content-title mb-[30px]">
        {{ t('message.ido.upcoming.title') }}
      </div>
      <ido-list :list="upcomingList"></ido-list>
    </div>

    <!--  funded ido-->
    <div class="fund-ido bg-white">
      <!--    TODO 气泡没有做-->
      <div class="ido-content-title">{{ t('message.ido.funded.title') }}</div>
      <div class="fund-ido-intro">{{ t('message.ido.funded.intro') }}</div>
      <ido-list :list="list"></ido-list>

      <v-pagination
        v-model="currentPage"
        :length="5"
        color="#17B1FE"
        size="small"
        class="mt-8"
      ></v-pagination>
    </div>

    <div class="ido-learn mb-[50px] mt-[80px] xs:mt-14 bg-white">
      <div class="ido-content-title">{{ t('message.ido.learn.title') }}</div>
      <div class="ido-learn-container">
        <div class="learn-participate">
          <v-img
            contain
            class="mx-auto learn-participate-img"
            :src="participateImg"
          ></v-img>

          <!-- title -->
          <div class="learn-join-title">
            {{ t('message.ido.learn.question-1') }}
          </div>
          <div class="learn-join-intro">
            {{ t('message.ido.learn.answer-1') }}
          </div>
        </div>
        <div class="learn-buy flex flex-row items-center relative h-full">
          <v-row>
            <v-col sm="6" md="6" xl="6" align-self="center" class="z-50">
              <div class="learn-title">
                {{ t('message.ido.learn.question-2') }}
              </div>
            </v-col>
            <v-col sm="6" md="6" xl="6" align-self="center" class="!pb-0">
              <img class="learn-content" :src="buyImg" />
              <!--              <v-img class="learn-content" :src="buyImg"></v-img>-->
            </v-col>
          </v-row>
        </div>
        <div class="learn-dao flex flex-row items-center relative h-full">
          <v-row>
            <v-col sm="6" md="6" xl="6" align-self="center" class="z-50">
              <div class="learn-title">
                {{ t('message.ido.learn.question-3') }}
              </div>
            </v-col>
            <v-col sm="6" md="6" xl="6" align-self="end">
              <img class="learn-content2 learn-content" :src="daoImg" />
              <!--              <v-img class="learn-content" :src="daoImg"></v-img>-->
            </v-col>
          </v-row>
        </div>
      </div>
    </div>

    <subscribe></subscribe>

    <contact class="xs:!hidden"></contact>
  </div>
</template>

<style scoped lang="scss">
.ido-content-title {
  font-family: DINPro-Bold, DINPro;
  font-weight: bold;
  color: #161615;
  @apply xl:text-5xl lg:text-4xl md:text-3xl sm:text-2xl xs:text-3xl xs:text-center;
}

.upcoming-ido,
.fund-ido,
.ido-learn,
.ido-total {
  @apply xs:mx-6 sm:mx-20 md:mx-10 lg:mx-[228px] xl:mx-[228px];
}

.ido-total {
  border-radius: 16px;
  border: 1px solid #bed4ff;
  height: max-content;
  //padding: 8px 16px 12px 16px;
  @apply xs:p-6;

  .ido-total-item-icon {
    margin-right: 22px;
    width: 104px;
    height: 104px;
    @apply xs:mr-4;
  }

  .total-title {
    font-size: 13px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #7a7893;
    @apply xs:mt-2;
  }

  .total-value {
    font-size: 27px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #161615;
  }

  .total-bg {
    width: 148px;
    height: 148px;
    @apply lg:w-[294px] lg:h-[294px] xl:w-[294px] xl:h-[294px] absolute top-[56px] left-[-64px] lg:left-[-144px] xl:left-[-134px] xs:hidden sm:top-[152px];
  }
}

.upcoming-ido {
  //@apply ;
}

.fund-ido {
  @apply mt-[92px] relative;
  .fund-ido-intro {
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 8px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #7a7893;
    @apply xs:text-center;
  }
}

.ido-learn {
  margin-bottom: 100px;

  .ido-learn-container {
    @apply xs:mt-[96px] sm:mt-[146px] md:mt-[112px] lg:mt-[136px] xl:mt-[146px] grid grid-rows-[274px_274px] xs:grid xs:grid-rows-[156px_156px_156px_156px] grid-flow-col grid-cols-2 xs:gap-y-4 xl:gap-10 lg:gap-10 md:gap-8 sm:gap-8 sm:grid-cols-1 sm:grid-rows-4 xs:grid-cols-1;

    .learn-participate,
    .learn-buy,
    .learn-dao {
      background: #ffffff;
      border-radius: 13px;
      border: 1px solid #bed4ff;
      cursor: pointer;
    }

    .learn-participate {
      @apply row-span-2 relative;

      .learn-participate-img {
        @apply xs:mt-[-62px] sm:mt-[-96px] md:mt-[-62px] lg:mt-[-62px] xl:mt-[-90px];
      }

      .learn-join-title {
        font-family: DINPro-Bold, DINPro;
        font-weight: bold;
        color: #161615;
        @apply xl:text-4xl lg:text-3xl md:text-2xl sm:text-xl text-[20px] mx-[26px] mt-[34px] mb-5 xs:mt-[20px];
      }

      .learn-join-intro {
        //width: 292px;
        font-size: 16px;
        font-family: DINPro-Regular, DINPro;
        font-weight: 400;
        color: #161615;
        line-height: 26px;
        @apply mx-[26px] mb-[26px];
      }
    }

    .learn-buy {
      //height: 140px;
      padding-left: 18px;
      @apply self-end;
    }

    .learn-dao {
      //height: 140px;
      padding-left: 18px;
      background: linear-gradient(270deg, #d4e4f9 0%, #ffffff 100%);
    }

    .learn-title {
      font-size: 12px;
      font-family: DINPro-Bold, DINPro;
      font-weight: bold;
      color: #161615;
      line-height: 16px;
      @apply xl:text-[28px] lg:text-[24px] md:text-[16px] xl:leading-[32px] lg:leading-[28px] md:leading-5 sm:leading-4 xs:text-[22px] xs:leading-[28px];
    }

    .learn-content {
      object-fit: contain;
      @apply absolute right-0 bottom-0;
    }
    .learn-content {
      @apply h-64 w-72 xs:h-36 xs:w-44;
    }
    .learn-content2 {
      @apply h-60 w-72 xs:h-32 xs:w-40;
    }
  }
}
</style>
